import React, { useEffect, useState } from 'react';
import *as service from '../../../../api/corporateprotection'
import { Button, Table, Drawer, Form, Input, message, Tag, Select, Switch, Radio, Space } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import type { DrawerProps } from 'antd/es/drawer';
import { PlusOutlined, ArrowDownOutlined } from '@ant-design/icons'
import './Enrollmentfile.scss'
interface Props {

}
function Enrollmentfile(props: Props) {
    interface DataType {
        id: number;
        name: string;
        department: string;
        post: string;
        worknumber: string;
        socialSecurity: string;
        accumulationFund: string;
        socialmonths: string;
        fundmonths: string
    }
    var [tableData, setTableData] = useState<DataType[]>([]) //定义表格组件状态--数据
    // 发送表格内容请求
    let corporateprotectionlist = async () => {
        let res = await service.corporateprotection_archiveslist()
        setTableData(res.data.data)
    }

    // 组件挂载期
    useEffect(() => {
        corporateprotectionlist()
    }, [])


    //数据源
    const columns: ColumnsType<DataType> = [
        {
            title: '序号', //表格列的标题
            render: (_, record) => <a>{tableData.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '姓名', //表格列的标题
            key: 'name',
            render: (_, record) => <div>{record.name}</div>//动态渲染标签/组件
        },
        {
            title: '部门', //表格列的标题
            key: 'department',
            render: (_, record) => <div>{record.department}</div>,//动态渲染标签/组件
        },
        {
            title: '岗位', //表格列的标题
            key: 'Post',
            render: (_, record) => <div>{record.post}</div>,//动态渲染标签/组件
        },
        {
            title: '工号', //表格列的标题
            key: 'Worknumber',
            render: (_, record) => <div>{record.worknumber}</div>,//动态渲染标签/组件
        },
        {
            title: '社保方案', //表格列的标题
            key: 'SocialSecurity',
            render: (_, record) => <div>{record.socialSecurity}</div>,//动态渲染标签/组件
        },
        {
            title: '公积金方案', //表格列的标题
            key: 'AccumulationFund',
            render: (_, record) => <div>{record.accumulationFund}</div>,//动态渲染标签/组件
        },
        {
            title: '社保缴纳月数', //表格列的标题
            key: 'Socialmonths',
            render: (_, record) => <div>{record.socialmonths}</div>,//动态渲染标签/组件
        },
        {
            title: '公积金缴纳月数', //表格列的标题
            key: 'fundmonths',
            render: (_, record) => <div>{record.fundmonths}</div>,//动态渲染标签/组件
        },
        {
            title: '操作', //表格列的标题
            render: (_, record) => <div> <button style={{ color: 'red', border: "none", backgroundColor: '#fff', cursor: 'pointer' }} onClick={() => { archivesdelete(record) }}>删除</button></div>,//动态渲染标签/组件
        },
    ]

    //删除
    let archivesdelete =async (record: any) => {
        let res =await service.corporateprotection_archivesdelete({ id: record.id })
        if(res.data.code==200){
            corporateprotectionlist()
            message.success({ content: '删除成功' })
        }
    }
    return (
        <div className='accumulationfund'>
            <h2>参保档案</h2>
            <div className="opts">
            </div>
            <Table size={'small'} columns={columns} dataSource={tableData} style={{ marginTop: 20 }} rowKey={""} pagination={{ pageSize: 5 }} />
        </div >
    );
}

export default Enrollmentfile;